<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}

		.box1{
			width: 300px;
			height: 300px;
			background-color: red;
			float:left;
		}
		.box2{
			width: 400px;
			height: 400px;
			background-color: green;
			float:right;
		}
	</style>
</head>
<body>

	<!-- 
		浮动是css里面布局最多的一个属性

		效果： 两个元素并排了，并且两个元素都能够设置宽度和高度

		浮动想学好：一定要知道它的四个特性：

		1.浮动的元素脱标
		2.浮动的元素互相贴靠
		3.浮动的元素有“字围”效果
		4.收缩的效果


	 -->

	 <div class="box1"></div>
	 <div class="box2"></div>

	

	
</body>
</html>